<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="auto"
      label-position="left"
    >
      <h6 style="font-size: 22px; margin-bottom: 20px">实习基本信息</h6>
      <el-form-item label="实习名称：" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="实习介绍：">
        <el-input v-model="form.desc" type="textarea" />
      </el-form-item>
      <el-form-item label="实习时间：">
        <el-date-picker
          v-model="form.date"
          type="datetimerange"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="实习人数：">
        <el-input-number v-model="form.num" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="联系人：">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="电话：">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="邮箱：">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="实习场地：">
        <el-col :span="21"> <el-input v-model="form.name" /> </el-col>
        <el-col :span="1"> </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            class="button-common-default"
            @click="selectPlace"
            >选择场地</el-button
          >
        </el-col>
      </el-form-item>

      <el-form-item label="授课平台：">
        <el-radio-group v-model="form.platform">
          <el-radio value="vmcourse">VMcourse平台</el-radio>
          <el-radio value="other">其他</el-radio>
        </el-radio-group>
      </el-form-item>
      <h6 style="font-size: 22px; margin: 40px 0 20px 0">相关申请材料</h6>
      <el-form-item label="">
        <el-col :span="1"></el-col>
        <el-col :span="5">
          <el-upload
            class="uploader_file"
            v-model:file-list="form.fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else class="empty_uploader">
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              <span>实习方案</span>
            </div>
          </el-upload>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="5">
          <el-upload
            class="uploader_file"
            v-model:file-list="form.fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else class="empty_uploader">
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              <span>课程表（非必填）</span>
            </div>
          </el-upload></el-col
        >
        <el-col :span="2"></el-col>
        <el-col :span="5">
          <el-upload
            class="uploader_file"
            v-model:file-list="form.fileList"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <div v-else class="empty_uploader">
              <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              <span>其他材料（非必填）</span>
            </div>
          </el-upload>
        </el-col>
      </el-form-item>
      <el-form-item>
        <div class="submit-btn">
          <el-button class="goback_btn" @click="router.go(-1)">返回</el-button>
          <el-button
            type="primary"
            class="button-common-default"
            @click="onSubmit(formRef)"
            >发起实习</el-button
          >
        </div>
      </el-form-item>
    </el-form>
    <!-- 弹框 -->
    <common-drawer
      :gridData="gridData"
      :drawerDialog="drawerDialog"
      :title="title"
      :drawerType="drawerType"
      :size="size"
      :hasSearch="hasSearch"
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @currentPageChange="currentPageChange"
      @closeDrawer="closeDrawer"
      @submitDrawer="submitDrawer"
    ></common-drawer>
  </div>
</template>

<script setup>
import commonDrawer from "@/components/common/commonDrawer.vue";
import { useRouter } from "vue-router";
const router = useRouter();
const form = ref({
  num: 1,
  platform: "vmcourse",
});
const rules = ref({
  name: [{ required: true, message: "请输入实习名称", trigger: "blur" }],
});
const imageUrl = ref("../../assets/images/bg.png");

const drawerDialog = ref(false);
const title = ref("请选择实习场地");
const drawerType = ref("table");
const size = ref("35%");
const hasSearch = ref(true);
const total = ref(850);
const pageSize = ref(15);
const currentPage = ref(1);
const gridData = ref([
  // 根据表格中的label来定义
  {
    venueName: "B512大教室",
    affiliatedUnit: "计算机学院",
    capacity: "100",
    contacts: "张三",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "海南大学",
    capacity: "100",
    contacts: "张里斯",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
  {
    venueName: "B512大教室",
    affiliatedUnit: "电子学院",
    capacity: "100",
    contacts: "张王五",
    phone: "123456789",
    state: "空闲",
  },
]);
//选择场地
const selectPlace = () => {
  drawerDialog.value = true;
};

//分页切换事件
const currentPageChange = (val) => {
  currentPage.value = val;
  console.log(`当前分也是：${val}`);
};

//关闭抽屉
const closeDrawer = () => {
  drawerDialog.value = false;
};
//提交抽屉
const submitDrawer = (val) => {
  drawerDialog.value = false;
};
const formRef = ref(null);
const onSubmit = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("submit!", form.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="scss" scoped>
.uploader_file {
  width: 100%;
  height: 176px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.3);
  box-shadow: var(--el-box-shadow-lighter);
  display: flex;
  flex-direction: column;
  justify-content: center;
  .empty_uploader {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    > span {
      margin-top: 10px;
      color: #707070;
    }
  }
}
.avatar-uploader-icon {
  margin-top: 20px;
  font-size: 28px;
  color: #8c939d;
}
.submit-btn {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.goback_btn {
  width: 80px;
  color: #4d84fa;
  background-color: #e5eaff;
  box-shadow: rgba(4, 30, 66, 0.1) 0px 2px 3px 0px;
  border-radius: 5px;
  &:hover {
    background-color: rgba(229, 234, 255, 0.6);
  }
}
</style>
